<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>Title</title>
    <style>
        #parent{
    position: relative;
    margin: 50px auto;
    padding: 0;
    width: 500px;
    height: 309px;
}

#uls{
    position: relative;
    margin: 0;
    padding: 0;
    width: 500px;
    height: 309px;
    overflow: hidden;
}

#img_ul{
    position: absolute;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
    width: 3000px;           /*多留出一张图片的宽度！*/
    list-style: none;
}
#img_ul li{
    float: left;
    margin: 0;
    padding: 0;
    width: 500px;
    height: 309px;
}
#img_ul li img{
    width: 500px;
    height: 309px;
}

#litCir_ul{
    position: absolute;
    margin: 0;
    padding: 0;
    right: 10px;
    bottom: 10px;
    list-style: none;
}
#litCir_ul li{
    margin: 0;
    padding: 0;
    float: left;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    border-radius: 50%; 
    margin-left:10px ;
    cursor: pointer;
}

li.active{
    background-color: white;
}
li.quiet{
    background-color: #1e90ff;
}

#buttons{
    margin: 0;
    padding: 0;
    display: none;
}
#buttons span{
    position: absolute;
    width: 40px;
    height: 40px;
    top: 50%;
    margin-top: -20px;
    line-height: 40px;
    text-align: center;
    font-weight: bold;
    font-family: Simsun;
    font-size: 30px;
    border: 1px solid #fff;
    opacity: 0.3;
    cursor: pointer;
    color: #fff;
    background: black;
}
#left{
    left: 5px;
}
#right{
    left: 100%;
    margin-left: -45px;
}
    </style>
</head>
<body>
    <div id= "parent">
        <div id="uls">
            <ul id="img_ul">
                <li><img src="pic/WIN_20190917_17_20_56_Pro.jpg"/></li>
                <li><img src="pic/WIN_20190917_17_20_59_Pro.jpg"/></li>
                <li><img src="pic/WIN_20190917_17_21_09_Pro.jpg"/></li>
                <li><img src="pic/WIN_20190917_17_21_10_Pro.jpg"/></li>
                <li><img src="pic/鲁大师跑分.jpg"/></li>
            </ul>
            <ul id='litCir_ul'></ul>
        </div>
        <div id="buttons">
            <span id="left">&lt;</span>
            <span id="right">&gt;</span>
        </div>
    </div>
</body>

<script>
        /*获取HTML中的对象*/
    var parent = document.getElementById("parent");
    var img_ul = document.getElementById("img_ul");
    var litCir_ul = document.getElementById("litCir_ul");
    var buttons = document.getElementById("buttons");
    var cLis =litCir_ul.children;

    var len = img_ul.children.length;     //图片张数
    var width = parent.offsetWidth;       //每张图片的宽度
    var rate = 15;                        //一张图片的切换速度， 单位为px
    var times = 1;                        //切换速度的倍率
    var gap = 2000;                       //自动切换间隙， 单位为毫秒
    var timer = null;                     //初始化一个定时器
    var picN = 0;                         //当前显示的图片下标
    var cirN = 0;                         //当前显示图片的小圆点下标
    var temp;
    for (var i=0; i<len; i++){
        var a_li = document.createElement("li");
        a_li.className = 'quiet';
        litCir_ul.appendChild(a_li);
    }
    litCir_ul.children[0].className = "active";

    function Roll(distance){                                         //参数distance：滚动的目标点（必为图片宽度的倍数）
        clearInterval(img_ul.timer);                                     //每次运行该函数必须清除之前的定时器！
        var speed = img_ul.offsetLeft < distance ?  rate : (0-rate);     //判断图片移动的方向

        img_ul.timer = setInterval(function(){                           //设置定时器，每隔10毫秒，调用一次该匿名函数
            img_ul.style.left = img_ul.offsetLeft + speed + "px";        //每一次调用滚动到的地方 (速度为 speed px/10 ms)         
            var leave = distance - img_ul.offsetLeft;                    //距目标点剩余的px值      
            /*接近目标点时的处理，滚动接近目标时直接到达， 避免rate值设置不当时不能完整显示图片*/
            if (Math.abs(leave) <= Math.abs(speed)) {                    
                clearInterval(img_ul.timer);
                img_ul.style.left = distance + "px";
            }
        },10);
    }   


    function Roll(distance){                                         //参数distance：滚动的目标点（必为图片宽度的倍数）
        clearInterval(img_ul.timer);                                     //每次运行该函数必须清除之前的定时器！
        var speed = img_ul.offsetLeft < distance ?  rate : (0-rate);     //判断图片移动的方向

        img_ul.timer = setInterval(function(){                           //设置定时器，每隔10毫秒，调用一次该匿名函数
            img_ul.style.left = img_ul.offsetLeft + speed + "px";        //每一次调用滚动到的地方 (速度为 speed px/10 ms)         
            var leave = distance - img_ul.offsetLeft;                    //距目标点剩余的px值      
            /*接近目标点时的处理，滚动接近目标时直接到达， 避免rate值设置不当时不能完整显示图片*/
            if (Math.abs(leave) <= Math.abs(speed)) {                    
                clearInterval(img_ul.timer);
                img_ul.style.left = distance + "px";
            }
        },10);
    }

    function autoRun(){
        picN++;
        cirN++;
        if(picN > len){                  //滚动完克隆项后
            img_ul.style.left = 0;       //改变left至真正的第一项处
            picN = 1;                    //从第二张开始显示
        }
        Roll(-picN*width);
        
        if(cirN > len-1){                //判断是否到了最后一个圆点
            cirN = 0;                 
        }
        for(var i=0; i<len; i++){
            cLis[i].className = "quiet";
        }
        cLis[cirN].className = "active";
    }

    for(var i=0; i<len; i++){
        cLis[i].index = i;
        cLis[i].onmouseover = function(){
            for(var j=0; j<len; j++){
                cLis[j].className = "quiet";
            }
            this.className = "active";
            temp = cirN;
            picN = cirN = this.index;
            times = Math.abs(this.index - temp);  //距离上个小圆点的距离
            rate = rate*times;                    //根据距离改变切换速率
            Roll(-this.index * width);
            rate = 15;
        }
    }


        /*上一张*/
        buttons.children[0].onclick = function(){ 
        picN--;
        cirN--;
        if(picN < 0){                               //滚动完第一项后
            img_ul.style.left = -len*width + "px";  //改变left至克隆的第一项处
            picN = cirN = len-1;
        }
        Roll(-picN*width);
        //bug处理
        if(cirN < 0){
            cirN = len-1;
        }
        for(var i=0; i<len; i++){
            cLis[i].className = "quiet";
        }
        cLis[cirN].className = "active";
    }
    /*下一张*/
    buttons.children[1].onclick = autoRun;


</script>
</html>